<%@ page language="java" isELIgnored="false"
	contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@ include file="/WEB-INF/jsp/ResourceGlobal.jsp"%>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>默认页</title>
		<style type="text/css">
			p {
				margin: 0;
			}
			
			.body {
				width: 100%;
			}
			
			.module {
				width: 100%;
				display: flex;
				margin: 0 0 10px 0;
			}
			
			.section {
				border-top: solid 2px #e3e3e3;
				background: #fff;
			}
			
			.section-head {
				width: 100%;
				height: 40px;
				border-bottom: solid 1px #e3e3e3;
			}
			
			.section-head h2 {
				font-size: 14px;
				line-height: 40px;
				color: #333;
				margin: 0 3px 0 20px;
				float: left;
			}
			
			.section-head span.short-name {
				font-size: 12px;
				color: #f50;
				line-height: 40px;
				float: left;
			}
			
			.section-con {
				width: 100%;
				padding-bottom: 20px;
				min-height: 220px;
			}
			
			.scale {
				flex: 1;
				margin: 0 20px 0 0;
				min-width: 250px;
			}
			
			.scale .section:nth-child(2) {
				margin-top: 10px;
			}
			
			.scale .section-head span.meta {
				display: block;
				width: 32px;
				height: 16px;
				line-height: 16px;
				font-size: 12px;
				border-radius: 3px;
				text-align: center;
				background: #fc681b;
				color: #fff;
				float: right;
				margin: 12px 20px 0 0;
			}
			
			.scale .section-con {
				position: relative;
				height: 220px;
				min-height: auto;
				padding: 0;
			}
			
			.scale .section-con .tips {
				position: absolute;
				top: 81px;
				right: 20px;
				font-size: 12px;
				color: #999;
			}
			
			.scale .section-con .num {
				font-size: 40px;
				text-indent: 8px;
			}
			
			.scale .section-con .num .text {
				height: 169px;
				line-height: 169px;
				display: inline-block;
				vertical-align: -3%;
			}
			
			.scale .section-con .num .unit {
				font-size: 16px;
				height: 56px;
				font-weight: bold;
				margin-left: 10px;
			}
			
			.scale .section-con .meta {
				position: absolute;
				bottom: 48px;
				left: 20px;
				font-size: 14px;
				color: #333;
			}
			
			.scale .section-con .val {
				position: absolute;
				font-size: 12px;
				padding: 0 15px 0 0;
				color: #fb6822;
				bottom: 50px;
				right: 30px;
			}
			
			.scale .section-con i.fa-arrow-up {
				position: absolute;
				right: 30px;
				bottom: 53px;
				color: #fc6821;
			}
			
			.scale .section-con i.fa-arrow-up.rotate {
				transform: rotate(180deg);
			}
			
			.scale .section-con .progress {
				width: 90%;
				margin: 0 auto;
				border-radius: 10px;
				height: 15px;
			}
			
			.scale .section-con .progress .progress-bar {
				border-radius: 10px;
				line-height: 15px;
			}
			
			.scale .section-con .progress .progress-bar .sr-only {
				clip: auto;
				width: 30px;
				height: 15px;
				line-height: 15px;
				font-size: 12px;
				position: relative;
				text-align: center;
				color: #fff;
			}
			
			.message {
				flex: 3;
			}
			
			.message .section-head span.meta {
				display: block;
				width: 32px;
				height: 16px;
				line-height: 16px;
				font-size: 12px;
				border-radius: 3px;
				text-align: center;
				background: #fc681b;
				color: #fff;
				float: right;
				margin: 12px 10px 0 0;
				cursor: pointer;
			}
			
			.message .section-head i.icon-flag {
				float: right;
				margin: 15px 20px 0 0;
				cursor: pointer;
			}
			
			.message .section-head i.icon-flag.active {
				color: #fc6821;
			}
			
			.message .section-head span.btn-refresh {
				display: none;
			}
			
			.message .section-con {
				display: flex;
				flex-wrap: wrap;
				align-content: flex-start;
			}
			
			.message .section-con p.no-message {
				margin: 0 auto;
				line-height: 200px;
			}
			
			.message .section-con .item {
				display: flex;
				width: 47%;
				margin: 0 0 0 2%;
				height: 40px;
				border-bottom: solid 1px #e5e5e5;
			}
			
			.message .section-con .item .item-text {
				display: inline;
				flex: 1;
				line-height: 40px;
				font-size: 14px;
				color: #333;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			.message .section-con .item .item-text span {
				outline: none;
				cursor: pointer;
			}
			
			.message .section-con .item .item-text:hover {
				color: #fc6821;
			}
			
			.message .section-con .item .item-time {
				width: 60px;
				height: 40px;
				line-height: 40px;
				font-size: 14px;
				color: #666;
				margin: 0 12px 0 10px;
			}
			
			.message .section-con .item:hover .item-time span.time-1 {
				display: none;
			}
			
			.message .section-con .item .item-time span.time-2 {
				display: none;
			}
			
			.message .section-con .item:hover .item-time span.time-2 {
				display: block;
			}
			
			.message .section-con .item .item-ctrl {
				display: inline-block;
				width: 79px;
				height: 22px;
				margin: 9px 0 0 0;
				border-left: solid 1px #e5e5e5;
			}
			
			.message .section-con .item .item-ctrl .icon-flag {
				margin: 5px 0 0 18px;
				cursor: pointer;
			}
			
			.message .section-con .item .item-ctrl .icon-flag.active {
				color: #fc6821;
			}
			
			.message .section-con .item .item-ctrl .icon-close {
				margin: 5px 16px 0 14px;
				cursor: pointer;
				color: #fc6821;
			}
			
			.pending {
				flex: 1;
			}
			
			.pending .section-head span.btn-refresh {
				display: none;
			}
			
			.pending .section-con {
				display: flex;
				flex-direction: column;
			}
			
			.pending .section-con .item {
				display: flex;
				margin: 0 20px;
				height: 39px;
				border-bottom: solid 1px #e2e2e2;
				background: #fff;
			}
			
			.pending .section-con .ui-state-highlight {
				display: flex;
				margin: 0 20px;
				height: 39px;
				background: #fbf9ee;
			}
			
			.pending .section-con .item .item-text {
				display: inline;
				flex: 1;
				line-height: 39px;
				text-indent: 20px;
				font-size: 14px;
				color: #333;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			.pending .section-con .item .item-text span {
				outline: none;
				cursor: pointer;
			}
			
			.pending .section-con .item .item-text:hover {
				color: #fc6821;
			}
			
			.pending .section-con .item .item-num {
				display: block;
				width: 32px;
				height: 16px;
				background: #ccc;
				color: #fff;
				text-align: center;
				line-height: 16px;
				border-radius: 3px;
				margin: 12px 20px 0 0;
				cursor: not-allowed;
			}
			
			.pending .section-con .item .item-num.active {
				background: #fc681b;
				cursor: pointer;
			}
			
			.pending .section-con .item i.fa-bars {
				margin: 12px 10px 0 0;
				color: #999;
				font-size: 16px;
				cursor: pointer;
			}
		</style>
		<script type="text/javascript" src="<%=context%>resources/modules/bootstrap/js/mustache.js?r=<%=Math.random()%>"></script>
		<script type="text/javascript" src="<%=context%>resources/modules/bootstrap/js/defaultPage.js?r=<%=Math.random()%>"></script>
	</head>

	<body class="fixed-nav" data-current-user="<%=currentId%>">
		<div class="body">
			<div class="module">
				<div class="section message">
					<div class="section-head">
						<h2>通知</h2>
						<span class="short-name">Message</span>
						<i class="fa fa-flag fa-lg icon-flag" aria-hidden="true"></i>
						<span class="meta">更多</span>
						<span class="btn-refresh">refresh</span>
					</div>
					<div class="section-con"></div>
				</div>
			</div>
	
			<div class="module">
				<div class="section pending">
					<div class="section-head">
						<h2>待办</h2>
						<span class="short-name">Pending</span>
						<span class="btn-refresh">refresh</span>
					</div>
					<div class="section-con"></div>
				</div>
			</div>
		</div>
		<script class="dis_none" id="temple1" type="x-tmpl-mustache">
{{#result}}
  <div class="item" data-id="{{id}}">
  	<p class="item-text"><span tabindex="100" data-content="{{backlogContentTemplate}}">{{backlogTitleTemplate}}</span></p>
  	<span class="item-num {{#isActive}}active{{/isActive}}" data-id="{{backlogMenu}}" data-type="待办" data-url="{{backlogPageUrl}}" data-backlog-parameter="{{backlogParameter}}">{{backlogOrMonitors}}</span>
	<i class="fa fa-bars" title="拖动"></i>
  </div>
{{/result}}
	</script>
		<script class="dis_none" id="temple2" type="x-tmpl-mustache">
{{#result}}
  <div class="item" data-id="{{id}}">
  	<p class="item-text"><span tabindex="100" data-content="{{monitorContentTemplate}}">{{monitorTitleTemplate}}</span></p>
  	<span class="item-time"><span class="time-1">{{time1}}</span><span class="time-2">{{time2}}</span></span>
  	<span class="item-num {{#monitorPageUrl}}can-jump{{/monitorPageUrl}}" data-id="{{monitorMenu}}" data-type="监控" data-url="{{monitorPageUrl}}" data-monitor-parameter="{{monitorParameter}}">{{backlogOrMonitors}}</span>
	<i class="fa fa-bars" title="拖动"></i>
  </div>
{{/result}}
	</script>
		<script class="dis_none" id="temple3" type="x-tmpl-mustache">
{{#result}}
<div class="item">
  <p class="item-text"><span tabindex="100" data-content="{{content}}">{{title}}</span></p>
  <span class="item-time"><span class="time-1">{{time1}}</span><span class="time-2">{{time2}}</span></span>
  <div class="item-ctrl">
    <i class="fa fa-flag fa-lg icon-flag" aria-hidden="true" data-id="{{id}}" title="标记"></i>
    <i class="fa fa-times icon-close" aria-hidden="true" data-id="{{id}}" title="已读"></i>
  </div>
</div>
{{/result}}
	</script>
		<script class="dis_none" id="temple4" type="x-tmpl-mustache">
{{#result}}
<div class="item">
  <p class="item-text"><span tabindex="100" data-content="{{content}}">{{title}}</span></p>
  <span class="item-time"><span class="time-1">{{time1}}</span><span class="time-2">{{time2}}</span></span>
  <div class="item-ctrl">
    <i class="fa fa-flag fa-lg icon-flag active" aria-hidden="true" data-id="{{id}}" title="标记"></i>
  </div>
</div>
{{/result}}
	</script>
	</body>
</html>
